<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
	href="../../static/bootstrap/css/bootstrap.min.css"
	th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
<link rel="stylesheet" href="../../static/css/patient.css"
	th:href="@{/static/css/patient.css}" />
<link rel="stylesheet" href="../../static/css/global.css"
	th:href="@{/static/css/global.css}" />
<title>个人信息页</title>
</head>

<body>
	<!-- 弹窗组件 -->
	<div th:replace="reuse/alertBox::alertBox"></div>
	<!-- 头部固定导航栏 -->
	<div th:replace="~{homepageFP::patNav}"></div>
	<main class="mainBox">
		<div class="container shadow-md-sm">
			<div>
				<div
					class=" container d-flex justify-content-between align-items-center labelBox">
					<strong>账号信息</strong>
					<div>
						<button th:if="${accountInfo == 'onshow'}" type="button"
							class="btn btn-outline-secondary btn-sm">
							<a th:href="@{/patient/personal/changeForAcc}">修改</a>
						</button>
						<button th:if="${accountInfo == 'change'}" type="button"
							class="btn btn-outline-primary btn-sm">
							<a th:href="@{/patient/personal}">取消</a>
						</button>
						<button th:if="${accountInfo == 'change'}" type="submit"
							form="identifyForm" class="btn btn-outline-primary btn-sm">保存</button>
					</div>
				</div>
				<form action="/patient/personal/changeForAcc" method="post"
					id="identifyForm" class="container">
					<div class="row justify-content-center mb-3 label">
						<label for="account" class="col-3 col-md-1 col-form-label">
							账户 </label>
						<div class="col-8 col-md-7" th:switch="${accountInfo}">
							<p th:case="onshow" class="form-control-plaintext">邮箱号/手机号</p>
							<input th:case="change" type="text" class="form-control" disabled
								placeholder="默认为 邮箱号/手机号" name="account" />
						</div>
					</div>
					<div class="row justify-content-center mb-3">
						<label for="email" class="col-3 col-md-1 col-form-label">
							邮箱 </label>
						<div class="col-8 col-md-7" th:switch="${accountInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.email}]]</p>
							<input th:case="change" type="email" class="form-control"
								placeholder="请输入您的邮箱" name="email" th:value="${patient.email}" />
						</div>
					</div>
					<div class="row justify-content-center mb-3">
						<label for="telphone" class="col-3 col-md-1 col-form-label">
							手机 </label>
						<div class="col-8 col-md-7" th:switch="${accountInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.phone}]]</p>
							<input th:case="change" type="tel" class="form-control"
								placeholder="请输入您的手机号" name="phone" th:value="${patient.phone}"
								disabled />
						</div>
					</div>
					<div class="row justify-content-center mb-3">
						<label for="password" class="col-3 col-md-1 col-form-label">
							密码 </label>
						<div class="col-8 col-md-7" th:switch="${accountInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.password}]]</p>
							<input th:case="change" name="password" type="password"
								class="form-control" placeholder="必填"
								th:value="${patient.password}" />
						</div>
					</div>
				</form>
			</div>
			<div>
				<div
					class="d-flex justify-content-between align-items-center container labelBox">
					<strong>个人信息</strong>
					<div>
						<button th:if="${personalInfo == 'onshow'}" type="button"
							class="btn btn-outline-secondary btn-sm">
							<a th:href="@{/patient/personal/changeForPer}">修改</a>
						</button>
						<button th:if="${personalInfo == 'change'}" type="button"
							class="btn btn-outline-primary btn-sm">
							<a th:href="@{/patient/personal}">取消</a>
						</button>
						<button th:if="${personalInfo == 'change'}" type="submit"
							form="personalForm" class="btn btn-outline-primary btn-sm">保存</button>
					</div>
				</div>
				<form action="/patient/personal/changeForPer" method="post"
					id="personalForm" class="container">
					<div class="row justify-content-center mb-3">
						<label for="name" class="col-3 col-md-1 col-form-label">
							姓名 </label>
						<div class="col-8 col-md-7" th:switch="${personalInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.name}]]</p>
							<input th:case="change" type="text" class="form-control"
								placeholder="please input your name" th:value="${patient.name}"
								name="name" />
						</div>
					</div>
					<div class="row justify-content-center mb-3">
						<label for="birthday" class="col-3 col-md-1 col-form-label">
							年龄 </label>
						<div class="col-8 col-md-7" th:switch="${personalInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.birthday}]]</p>
							<input th:case="change" type="date" class="form-control" step="1"
								min="1960-09-22" max="2023-01-31" name="birthday"
								th:value="${patient.birthday}">
						</div>
					</div>
					<div class="row justify-content-center mb-3">
						<label for="sex" class="col-3 col-md-1 col-form-label"> 性别
						</label>
						<div class="col-8 col-md-7" th:switch="${personalInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.sex}]]</p>
							<select th:case="change" name="sex" class="form-select">
								<option th:selected="${patient.sex == '男性'}" value="男性">男性</option>
								<option th:selected="${patient.sex == '女性'}" value="女性">女性</option>
							</select>
						</div>
					</div>
					<div class="row justify-content-center mb-3">
						<label for="identify_card" class="col-3 col-md-1 col-form-label">
							身份证 </label>
						<div class="col-8 col-md-7" th:switch="${personalInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.identifyCard}]]</p>
							<input th:case="change" type="text" class="form-control"
								placeholder="please input your ID card number"
								name="identifyCard" th:value="${patient.identifyCard}" />
						</div>
					</div>
					<div class="row justify-content-center mb-3">
						<label for="medical_card" class="col-3 col-md-1 col-form-label">
							医保卡 </label>
						<div class="col-8 col-md-7" th:switch="${personalInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.medicalCard}]]</p>
							<input th:case="change" type="text" class="form-control"
								placeholder="please input your medical card number"
								name="medicalCard" th:value="${patient.medicalCard}" />
						</div>
					</div>
					<div class="row justify-content-center mb-3">
						<label for="address" class="col-3 col-md-1 col-form-label">
							住址 </label>
						<div class="col-8 col-md-7" th:switch="${personalInfo}">
							<p th:case="onshow" class="form-control-plaintext">[[${patient.address}]]</p>
							<input th:case="change" type="text" class="form-control"
								placeholder="please input your address" name="address"
								th:value="${patient.address}" />
						</div>
					</div>
				</form>
			</div>
		</div>
	</main>
	<script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>

</html>